<template>
    <div class='all'>
      <!-- 头部 -->
        <div class='header'>
            <div class="head">
                <div class='header-wrap'>
                    <div class='wrap-left'>
                        <i class='iconfont icon-dingxiang'></i>
                    </div>
                    <div class='wrap-right'>
                        <ul class='right-ul'>
                            <li>美食 |</li>
                            <li>酒店 |</li>
                            <li>出行 |</li>
                            <li>娱乐 |</li>
                            <li>生活 |</li>
                            <li>购物</li>
                            
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class='header-banner'>
                <img src="/show-yellow/src/assets/ld/img/banner.png" class='back'>
                <div class='logo'>
                    <p class='shop'>逛逛商铺</p>
form                    <p>寻找你想要的商铺</p>
                </div>
                <div class='wow'>
                    <button>预约店铺</button>
                </div>
            </div>
        </div>
        <!-- 搜索店铺 -->
        <div class="con">
          <div class='con-wrap'>
            <div class="from-wrap">
              <form action="">
                <el-input v-model="input" placeholder="请输入店铺类型" class='slot'></el-input>
                <el-button type="primary">查询</el-button>
              </form>
            </div>
          </div>
        </div>
        <!-- 随机推荐的店铺 -->
        <div class="classify">
          <!-- 轮播图 -->
            <div class="block">
              <span class="demonstration">Click 指示器触发</span>
              <el-carousel trigger="click" height="400px">
                <el-carousel-item v-for="item in 4" :key="item">
                  <h3 class="small">{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
        </div>
       <Center></Center>
       <Center></Center>
       <!-- 底部联系我们 -->
       <div class="part">
         <div class="contact">
           <div class="com-title">
             <p class="com-wow">联系客服了解更多内容</p>
           </div>
           <div class="com-main">
             <div class="container">
               <div class="from-com">
                 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                   <p class="row">现在预约店铺 立马为你提供服务</p>
                    <el-form-item label="姓名" prop="name" class='tip'>
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺类型" prop="region" class='tip'>
                      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="desc" class='tip'>
                      <el-input type="text" v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('ruleForm')">立即预约</el-button>
                    </el-form-item>
                    <div class="text-grey">
                      <div>简单三步便可预约</div>
                      <div>确认店铺类型--开通定位--开启你的预约</div>
                    </div>
                  </el-form>
                 <div class="bet">
                   <div class="l"><span>400-800-8888</span></div>
                   <div class="r">
                     周一至周五 9:00-22:00<br>
                     周六至周日 9:00-18:00
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
    </div>
</template>

<script>
import Center from './M-center.vue'
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    components:{Center},
    data() {
      return {
        input:'',
        shops:[
          {img:require("../assets/TB16YtGi46I8KJjy0FgXXXXzVXa-230-230.png"),name:'美折促销',appe:'真不错'},
          {img:'../assets/TB16YtGi46I8KJjy0FgXXXXzVXa-230-230.png',name:'超级店长',appe:'真不错'},
          {img:'../assets/TB16YtGi46I8KJjy0FgXXXXzVXa-230-230.png',name:'优惠券',appe:'真不错'},
          {img:'../assets/TB16YtGi46I8KJjy0FgXXXXzVXa-230-230.png',name:'爱用交易',appe:'真不错'},
        ],
        stores:[
          {title:'6.欢乐逛打折',desc:'促销'},
          {title:'7.爱用商品',desc:'促销'},
          {title:'8.快递助手',desc:'促销'},
          {title:'9.打包配',desc:'促销'},
          
        ],
        // 咨询的表单
        ruleForm: {
          name: '',
          region: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择店铺类型', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '联系方式', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

